import { PageHeader } from '@/components/page-header';
import { Button, SearchBar } from '@/components/base';
import { PageController } from '../../page-controller';
// import { useObserver } from 'mobx-react-lite';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { PlusOutlined } from '@ant-design/icons';
import * as pages from '@/pages';
import { Controller } from '@/views/basic-layout/controller';

export function Header() {
    const navigate = useNavigate();
    const controller = React.useContext(Controller.Context);
    const pageController = React.useContext(PageController.Context);

    return (
        <PageHeader
            title="产品列表"
            onBack={() => navigate(-1)}
            footer={<SearchBar placeholder='搜索商品名称、编号' showCancelButton onSearch={pageController.setKeyword} />}
            extra={
                <Button
                    color='primary'
                    size='small'
                    fill='none'
                    onClick={() => {
                        controller.removeTab(pages.customerDetailForm.name)
                        navigate(`/${pages.productDetailForm.name}`)
                    }}
                >
                    <PlusOutlined />
                    <span>添加商品</span>
                </Button>
            }
        />
    );
} 